<template>
  <div>
    <el-dialog v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" title="添加课程">
      <el-row :gutter="20">
        <el-form ref="elForm" :model="course" :rules="rules" size="medium" label-width="100px">
          <el-col :span="22">
            <el-form-item label="封面选择" required>
              <el-upload
                ref="cover"
                :file-list="coverfileList"
                :action="coverAction"
                :before-upload="coverBeforeUpload"
                header="multipart/form-dat"
                list-type="picture-card"
                accept="image/*"
                name="cover"
                :http-request="uploadSectionFile"
              >
                <i class="el-icon-plus"></i>
                <div slot="tip" class="el-upload__tip">只能上传不超过 2MB 的image/*文件</div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="课程名称" prop="cname">
              <el-input
                v-model="course.cname"
                placeholder="请输入课程名称"
                clearable
                suffix-icon="el-icon-warning"
                :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="创建者" prop="tname">
              <el-input
                v-model="course.tname"
                placeholder="请输入您的创建者"
                readonly
                clearable
                suffix-icon="el-icon-user"
                :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="课程描述" prop="describe">
              <el-input
                v-model="course.describe"
                type="textarea"
                placeholder="请输入课程描述"
                :autosize="{minRows: 4, maxRows: 4}"
                :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
import { createCourse } from "@/api/course";

export default {
  inheritAttrs: false,
  components: {},
  props: [],
  data() {
    return {
      course: {
        cover: null,
        cname: "",
        tno: this.$store.state.user.id,
        tname:this.$store.state.user.name,
        describe: undefined
      },
      rules: {
        cname: [
          {
            required: true,
            message: "请输入课程名称",
            trigger: "blur"
          }
        ],
        tno: [
          {
            required: true,
            message: "请输入您的创建者",
            trigger: "blur"
          }
        ],
        describe: [
          {
            required: true,
            message: "请输入课程描述",
            trigger: "blur"
          }
        ]
      },
      coverAction: "http://localhost:8081/uploadImgFile/courseCover/",
      coverfileList: []
    };
  },
  computed: {
  },
  watch: {
  },
  created() {},
  mounted() {},
  methods: {
    onOpen() {},
    uploadSectionFile(param) {
      var fileObj = param.file;
      // FormData 对象
      var form = new FormData();
      // 文件对象
      form.append("file", fileObj);
      const _this = this;
      axios({
        method: "post",
        url: "http://localhost:8081/uploadImgFile/courseCover/",
        headers: {
          "Content-Type": "multipart/form-data"
        },
        data: form
      }).then(res => {
        _this.course.cover = res.data.data.url;
      });
    },
    onClose() {
      this.$refs["elForm"].resetFields();
    },
    close() {
      this.$emit("update:visible", false);
    },
    handelConfirm() {
      this.$refs["elForm"].validate(valid => {
        if (!valid) return;
        else {
          this.course.tno = this.$store.state.user.id;
          this.post(this.course);
        }
      });
    },
    async post(course) {
      const { data: res } = await createCourse(course);
      if (res.code == 20000) {
        this.$notify.success({
          title: res.message,
          message: "课程创建成功"
        });
        await this.$emit("reload");
        // 关闭
        this.close();
      } else {
        return this.$message.error("课程创建失败:" + res.message);
      }
    },
    coverBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2;
      if (!isRightSize) {
        this.$message.error("文件大小超过 2MB");
      }
      let isAccept = new RegExp("image/*").test(file.type);
      if (!isAccept) {
        this.$message.error("应该选择image/*类型的文件");
      }
      return isRightSize && isAccept;
    }
  }
};
</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}
</style>
